<%@ Page Title="商品详情" Language="C#" MasterPageFile="~/ASP/HomeSite.Master" AutoEventWireup="true" CodeBehind="ProductDetail.aspx.cs" Inherits="Agricultural_Sales.ASP.ProductDetail" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
        <!-- 引入Bootstrap CSS -->
        <link href="../Content/bootstrap.min.css" rel="stylesheet" />
        <!-- 引入自定义样式 -->
        <style>
            .product-detail-container {
                max-width: 1200px;
                margin: 20px auto;
                padding: 30px;
                background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
                border-radius: 15px;
                box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
                border: 1px solid #e9ecef;
            }

            .product-detail-row {
                display: flex;
                gap: 50px;
                align-items: flex-start;
            }

            .product-image-section {
                flex: 1;
                max-width: 500px;
            }

            .product-image {
                width: 100%;
                height: 400px;
                object-fit: cover;
                border-radius: 15px;
                border: 2px solid #dee2e6;
                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
                transition: transform 0.3s ease, box-shadow 0.3s ease;
            }

            .product-image:hover {
                transform: scale(1.02);
                box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
            }

            .product-info-section {
                flex: 1;
                padding-left: 20px;
            }

            .product-title {
                font-size: 32px;
                font-weight: 700;
                color: #2c3e50;
                margin-bottom: 20px;
                text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
            }

            .product-price {
                font-size: 36px;
                color: #e74c3c;
                font-weight: 800;
                margin-bottom: 25px;
                text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
                background: linear-gradient(45deg, #e74c3c, #c0392b);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
            }

            .product-info-item {
                margin-bottom: 18px;
                font-size: 18px;
                color: #495057;
                padding: 8px 0;
                border-bottom: 1px solid #f1f3f4;
            }

            .product-info-label {
                font-weight: 600;
                color: #2c3e50;
                display: inline-block;
                width: 90px;
                margin-right: 10px;
            }

            .product-description {
                background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
                padding: 25px;
                border-radius: 12px;
                margin: 25px 0;
                line-height: 1.8;
                border: 1px solid #e9ecef;
                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
                position: relative;
                overflow: hidden;
            }

            .product-description::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                height: 4px;
                background: linear-gradient(90deg, #3498db, #2ecc71, #f39c12, #e74c3c);
            }

            .product-description h3 {
                color: #2c3e50;
                font-weight: 600;
                margin-bottom: 15px;
                font-size: 20px;
            }

            .product-description p {
                color: #5a6c7d;
                font-size: 16px;
                margin: 0;
            }

            .product-actions {
                margin-top: 40px;
                text-align: center;
                padding: 20px 0;
            }

            .btn-container {
                display: flex;
                justify-content: center;
                gap: 20px;
                flex-wrap: wrap;
            }

            .btn-custom {
                padding: 15px 35px;
                font-size: 18px;
                font-weight: 600;
                border: none;
                border-radius: 50px;
                cursor: pointer;
                transition: all 0.3s ease;
                text-transform: uppercase;
                letter-spacing: 1px;
                position: relative;
                overflow: hidden;
                min-width: 180px;
                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            }

            .btn-custom::before {
                content: '';
                position: absolute;
                top: 0;
                left: -100%;
                width: 100%;
                height: 100%;
                background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
                transition: left 0.5s;
            }

            .btn-custom:hover::before {
                left: 100%;
            }

            .btn-add-cart {
                background: linear-gradient(45deg, #27ae60, #2ecc71);
                color: white;
                border: 2px solid transparent;
            }

            .btn-add-cart:hover {
                background: linear-gradient(45deg, #229954, #27ae60);
                transform: translateY(-3px);
                box-shadow: 0 8px 25px rgba(39, 174, 96, 0.4);
            }

            .btn-buy-now {
                background: linear-gradient(45deg, #3498db, #5dade2);
                color: white;
                border: 2px solid transparent;
            }

            .btn-buy-now:hover {
                background: linear-gradient(45deg, #2980b9, #3498db);
                transform: translateY(-3px);
                box-shadow: 0 8px 25px rgba(52, 152, 219, 0.4);
            }

            .btn-custom:active {
                transform: translateY(-1px);
            }

            .back-link {
                display: inline-flex;
                align-items: center;
                margin-bottom: 25px;
                color: #3498db;
                text-decoration: none;
                font-size: 16px;
                font-weight: 500;
                padding: 8px 15px;
                border-radius: 25px;
                background: rgba(52, 152, 219, 0.1);
                transition: all 0.3s ease;
            }

            .back-link:hover {
                background: rgba(52, 152, 219, 0.2);
                text-decoration: none;
                color: #2980b9;
                transform: translateX(-5px);
            }

            .back-link::before {
                content: '←';
                margin-right: 8px;
                font-weight: bold;
            }

            /* 购买卡片样式 */
            .purchase-modal {
                display: none;
                position: fixed;
                z-index: 10000;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(0, 0, 0, 0.5);
                backdrop-filter: blur(5px);
            }

            .purchase-card {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                background: white;
                border-radius: 20px;
                padding: 30px;
                width: 90%;
                max-width: 600px;
                max-height: 90vh;
                overflow-y: auto;
                box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
                animation: modalSlideIn 0.3s ease;
            }

            @keyframes modalSlideIn {
                from {
                    opacity: 0;
                    transform: translate(-50%, -60%);
                }

                to {
                    opacity: 1;
                    transform: translate(-50%, -50%);
                }
            }

            .purchase-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 25px;
                padding-bottom: 15px;
                border-bottom: 2px solid #f1f3f4;
            }

            .purchase-title {
                font-size: 24px;
                font-weight: 700;
                color: #2c3e50;
                margin: 0;
            }

            .close-btn {
                background: none;
                border: none;
                font-size: 28px;
                color: #95a5a6;
                cursor: pointer;
                padding: 0;
                width: 40px;
                height: 40px;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: all 0.3s ease;
            }

            .close-btn:hover {
                background: #ecf0f1;
                color: #e74c3c;
            }

            .form-group {
                margin-bottom: 20px;
            }

            .form-label {
                display: block;
                margin-bottom: 8px;
                font-weight: 600;
                color: #2c3e50;
                font-size: 16px;
            }

            .form-control {
                width: 100%;
                padding: 12px 15px;
                border: 2px solid #e9ecef;
                border-radius: 10px;
                font-size: 16px;
                transition: all 0.3s ease;
                box-sizing: border-box;
            }

            .form-control:focus {
                outline: none;
                border-color: #3498db;
                box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
            }

            .quantity-control {
                display: flex;
                align-items: center;
                gap: 15px;
                margin: 15px 0;
            }

            .quantity-btn {
                width: 40px;
                height: 40px;
                border: 2px solid #3498db;
                background: white;
                color: #3498db;
                border-radius: 50%;
                font-size: 20px;
                font-weight: bold;
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: all 0.3s ease;
            }

            .quantity-btn:hover {
                background: #3498db;
                color: white;
            }

            .quantity-btn:disabled {
                opacity: 0.5;
                cursor: not-allowed;
            }

            .quantity-input {
                width: 80px;
                text-align: center;
                font-size: 18px;
                font-weight: 600;
            }

            .payment-options {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 15px;
                margin: 15px 0;
            }

            .payment-option {
                padding: 15px;
                border: 2px solid #e9ecef;
                border-radius: 10px;
                cursor: pointer;
                transition: all 0.3s ease;
                text-align: center;
                background: white;
            }

            .payment-option:hover {
                border-color: #3498db;
                background: #f8f9fa;
            }

            .payment-option.selected {
                border-color: #3498db;
                background: #e3f2fd;
                color: #1976d2;
            }

            .payment-status {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 15px;
                margin: 15px 0;
            }

            .status-option {
                padding: 15px;
                border: 2px solid #e9ecef;
                border-radius: 10px;
                cursor: pointer;
                transition: all 0.3s ease;
                text-align: center;
                background: white;
            }

            .status-option:hover {
                border-color: #27ae60;
                background: #f8f9fa;
            }

            .status-option.selected {
                border-color: #27ae60;
                background: #e8f5e8;
                color: #2e7d32;
            }

            .total-section {
                background: #f8f9fa;
                padding: 20px;
                border-radius: 10px;
                margin: 20px 0;
                border: 1px solid #e9ecef;
            }

            .total-item {
                display: flex;
                justify-content: space-between;
                margin-bottom: 10px;
                font-size: 16px;
            }

            .total-final {
                display: flex;
                justify-content: space-between;
                font-size: 20px;
                font-weight: 700;
                color: #e74c3c;
                border-top: 2px solid #dee2e6;
                padding-top: 15px;
                margin-top: 15px;
            }

            .action-buttons {
                display: flex;
                gap: 15px;
                margin-top: 25px;
            }

            .btn-cancel {
                flex: 1;
                padding: 15px;
                background: #95a5a6;
                color: white;
                border: none;
                border-radius: 10px;
                font-size: 16px;
                font-weight: 600;
                cursor: pointer;
                transition: all 0.3s ease;
            }

            .btn-cancel:hover {
                background: #7f8c8d;
            }

            .btn-confirm {
                flex: 2;
                padding: 15px;
                background: linear-gradient(45deg, #27ae60, #2ecc71);
                color: white;
                border: none;
                border-radius: 10px;
                font-size: 16px;
                font-weight: 600;
                cursor: pointer;
                transition: all 0.3s ease;
            }

            .btn-confirm:hover {
                background: linear-gradient(45deg, #229954, #27ae60);
                transform: translateY(-2px);
                box-shadow: 0 5px 15px rgba(39, 174, 96, 0.4);
            }

            .error-message {
                color: #e74c3c;
                font-size: 14px;
                margin-top: 5px;
                display: none;
            }

            /* 响应式设计 */
            @media (max-width: 768px) {
                .product-detail-row {
                    flex-direction: column;
                    gap: 30px;
                }

                .product-info-section {
                    padding-left: 0;
                }

                .btn-container {
                    flex-direction: column;
                    align-items: center;
                }

                .btn-custom {
                    width: 100%;
                    max-width: 300px;
                }

                .product-title {
                    font-size: 28px;
                }

                .product-price {
                    font-size: 30px;
                }

                .purchase-card {
                    width: 95%;
                    padding: 20px;
                }

                .payment-options,
                .payment-status {
                    grid-template-columns: 1fr;
                }

                .action-buttons {
                    flex-direction: column;
                }
            }

            /* 加载动画 */
            .fade-in {
                animation: fadeIn 0.8s ease-in;
            }

            @keyframes fadeIn {
                from {
                    opacity: 0;
                    transform: translateY(20px);
                }

                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }

            /* 按钮点击效果 */
            .btn-clicked {
                animation: clickEffect 0.3s ease;
            }

            @keyframes clickEffect {
                0% {
                    transform: scale(1);
                }

                50% {
                    transform: scale(0.95);
                }

                100% {
                    transform: scale(1);
                }
            }
        </style>
    </asp:Content>

    <asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
        <div class="product-detail-container fade-in">
            <a href="Home.aspx" class="back-link">返回商品列表</a>

            <asp:SqlDataSource ID="SqlDataSourceProduct" runat="server"
                ConnectionString="<%$ ConnectionStrings:AgriculturalSalesConnectionString %>" SelectCommand="SELECT p.ProductId, p.Name, p.Origin, p.Price, p.Inventory, p.Unit, p.Descr, 
                          CASE 
                              WHEN p.ImageUrl IS NULL OR p.ImageUrl = '' THEN '~/Image/default-product.png'
                              WHEN p.ImageUrl LIKE '/images/%' THEN REPLACE(p.ImageUrl, '/images/', '~/Image/')
                              ELSE p.ImageUrl
                          END AS ImageUrl,
                          pc.CategoryName
                          FROM Product p 
                          LEFT JOIN ProductCategory pc ON p.CategoryId = pc.CategoryId 
                          WHERE p.ProductId = @ProductId">
                <SelectParameters>
                    <asp:QueryStringParameter Name="ProductId" QueryStringField="id" Type="Int32" />
                </SelectParameters>
            </asp:SqlDataSource>

            <asp:FormView ID="fvProductDetail" runat="server" DataSourceID="SqlDataSourceProduct">
                <ItemTemplate>
                    <div class="product-detail-row">
                        <div class="product-image-section">
                            <asp:Image ID="imgProduct" runat="server" ImageUrl='<%# Eval("ImageUrl") %>'
                                AlternateText='<%# Eval("Name") %>' CssClass="product-image" />
                        </div>

                        <div class="product-info-section">
                            <h1 class="product-title">
                                <%# Eval("Name") %>
                            </h1>

                            <div class="product-price">
                                ¥<%# Eval("Price", "{0:F2}" ) %> / <%# Eval("Unit") %>
                            </div>

                            <div class="product-info-item">
                                <span class="product-info-label">产地：</span>
                                <%# Eval("Origin") %>
                            </div>

                            <div class="product-info-item">
                                <span class="product-info-label">分类：</span>
                                <%# Eval("CategoryName") %>
                            </div>

                            <div class="product-info-item">
                                <span class="product-info-label">库存：</span>
                                <span id="stockQuantity">
                                    <%# Eval("Inventory") %>
                                </span>
                                <%# Eval("Unit") %>
                            </div>

                            <div class="product-description">
                                <h3>商品描述</h3>
                                <p>
                                    <%# Eval("Descr") %>
                                </p>
                            </div>

                            <div class="product-actions">
                                <div class="btn-container">
                                    <asp:Button ID="btnAddToCart" runat="server" Text="加入购物车"
                                        CssClass="btn-custom btn-add-cart" CommandName="AddToCart"
                                        CommandArgument='<%# Eval("ProductId") %>' OnCommand="ProductAction_Command"
                                        OnClientClick="addClickEffect(this); return true;" />

                                    <button type="button" class="btn-custom btn-buy-now"
                                        data-product-id='<%# Eval("ProductId") %>'
                                        data-product-name='<%# HttpUtility.HtmlEncode(Eval("Name").ToString()) %>'
                                        data-product-price='<%# Eval("Price") %>'
                                        data-product-unit='<%# HttpUtility.HtmlEncode(Eval("Unit").ToString()) %>'
                                        data-product-inventory='<%# Eval("Inventory") %>'
                                        onclick="showPurchaseModalFromData(this)">
                                        立即购买
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </ItemTemplate>
                <EmptyDataTemplate>
                    <div style="text-align: center; padding: 50px;">
                        <h3>商品不存在或已下架</h3>
                        <p><a href="Home.aspx" class="back-link">返回商品列表</a></p>
                    </div>
                </EmptyDataTemplate>
            </asp:FormView>
        </div>

        <!-- 购买模态框 -->
        <div id="purchaseModal" class="purchase-modal">
            <div class="purchase-card">
                <div class="purchase-header">
                    <h2 class="purchase-title">确认购买</h2>
                    <button type="button" class="close-btn" onclick="closePurchaseModal()">&times;</button>
                </div>

                <form id="purchaseForm">
                    <!-- 商品信息 -->
                    <div class="form-group">
                        <label class="form-label">商品信息</label>
                        <div id="productInfo"
                            style="padding: 15px; background: #f8f9fa; border-radius: 8px; border: 1px solid #e9ecef;">
                            <!-- 动态填充商品信息 -->
                        </div>
                    </div>

                    <!-- 购买数量 -->
                    <div class="form-group">
                        <label class="form-label">购买数量</label>
                        <div class="quantity-control">
                            <button type="button" class="quantity-btn" onclick="decreaseQuantity()">-</button>
                            <input type="number" id="quantity" class="form-control quantity-input" value="1" min="1"
                                onchange="updateTotal()" />
                            <button type="button" class="quantity-btn" onclick="increaseQuantity()">+</button>
                        </div>
                        <div id="quantityError" class="error-message">购买数量不能超过库存数量</div>
                    </div>

                    <!-- 收货地址 -->
                    <div class="form-group">
                        <label class="form-label">收货地址 *</label>
                        <input type="text" id="deliveryAddress" class="form-control" placeholder="请输入详细收货地址" required />
                        <div id="addressError" class="error-message">请输入收货地址</div>
                    </div>

                    <!-- 联系电话 -->
                    <div class="form-group">
                        <label class="form-label">联系电话 *</label>
                        <input type="tel" id="contactPhone" class="form-control" placeholder="请输入联系电话" required />
                        <div id="phoneError" class="error-message">请输入正确的联系电话</div>
                    </div>

                    <!-- 支付方式 -->
                    <div class="form-group">
                        <label class="form-label">支付方式</label>
                        <div class="payment-options">
                            <div class="payment-option" data-method="微信支付" onclick="selectPaymentMethod(this)">
                                <strong>微信支付</strong>
                            </div>
                            <div class="payment-option" data-method="支付宝" onclick="selectPaymentMethod(this)">
                                <strong>支付宝</strong>
                            </div>
                            <div class="payment-option" data-method="银行卡" onclick="selectPaymentMethod(this)">
                                <strong>银行卡</strong>
                            </div>
                            <div class="payment-option" data-method="货到付款" onclick="selectPaymentMethod(this)">
                                <strong>货到付款</strong>
                            </div>
                        </div>
                    </div>

                    <!-- 支付状态 -->
                    <div class="form-group">
                        <label class="form-label">支付状态</label>
                        <div class="payment-status">
                            <div class="status-option selected" data-status="立即支付" onclick="selectPaymentStatus(this)">
                                <strong>立即支付</strong>
                            </div>
                            <div class="status-option" data-status="暂时不支付" onclick="selectPaymentStatus(this)">
                                <strong>暂时不支付</strong>
                            </div>
                        </div>
                    </div>

                    <!-- 订单总计 -->
                    <div class="total-section">
                        <div class="total-item">
                            <span>单价：</span>
                            <span id="unitPrice">¥0.00</span>
                        </div>
                        <div class="total-item">
                            <span>数量：</span>
                            <span id="totalQuantity">1</span>
                        </div>
                        <div class="total-final">
                            <span>总计：</span>
                            <span id="totalAmount">¥0.00</span>
                        </div>
                    </div>

                    <!-- 操作按钮 -->
                    <div class="action-buttons">
                        <button type="button" class="btn-cancel" onclick="closePurchaseModal()">取消订单</button>
                        <button type="button" class="btn-confirm" onclick="submitOrder()">生成订单</button>
                    </div>
                </form>
            </div>
        </div>

        <!-- 隐藏字段用于传递数据到后端 -->
        <asp:HiddenField ID="hdnOrderData" runat="server" />
        <asp:Button ID="btnSubmitOrder" runat="server" OnClick="btnSubmitOrder_Click" style="display: none;" />

        <!-- 引入Bootstrap JS -->
        <script src="../Scripts/jquery-3.7.0.min.js"></script>
        <script src="../Scripts/bootstrap.bundle.min.js"></script>

        <!-- 自定义JavaScript -->
        <script type="text/javascript">
            let currentProduct = {};
            let selectedPaymentMethod = '微信支付';
            let selectedPaymentStatus = '立即支付';

            // 按钮点击效果
            function addClickEffect(button) {
                $(button).addClass('btn-clicked');
                setTimeout(function () {
                    $(button).removeClass('btn-clicked');
                }, 300);
            }

            // 检查用户登录状态
            function checkLoginStatus() {
                // 这里需要从服务器端获取登录状态
                // 可以通过AJAX调用或者在页面加载时设置JavaScript变量
                return <%= Session["UserId"] != null ? "true" : "false" %>;
            }

            // 显示购买模态框
            function showPurchaseModal(productId, productName, price, unit, inventory) {
                // 检查登录状态
                if (!checkLoginStatus()) {
                    alert('请先登录后再购买商品');
                    window.location.href = 'Login.aspx?returnUrl=' + encodeURIComponent(window.location.href);
                    return;
                }

                currentProduct = {
                    id: productId,
                    name: productName,
                    price: parseFloat(price),
                    unit: unit,
                    inventory: parseInt(inventory)
                };

                // 填充商品信息
                document.getElementById('productInfo').innerHTML = `
                    <div style="display: flex; justify-content: space-between; align-items: center;">
                        <div>
                            <strong>${productName}</strong><br>
                            <span style="color: #666;">单价: ¥${price} / ${unit}</span>
                        </div>
                        <div style="color: #e74c3c; font-weight: bold;">
                            库存: ${inventory} ${unit}
                        </div>
                    </div>
                `;

                // 重置表单
                document.getElementById('quantity').value = 1;
                document.getElementById('quantity').max = inventory;
                document.getElementById('deliveryAddress').value = '';
                document.getElementById('contactPhone').value = '';

                // 重置选择状态
                document.querySelectorAll('.payment-option').forEach(option => {
                    option.classList.remove('selected');
                });
                document.querySelector('[data-method="微信支付"]').classList.add('selected');

                document.querySelectorAll('.status-option').forEach(option => {
                    option.classList.remove('selected');
                });
                document.querySelector('[data-status="立即支付"]').classList.add('selected');

                selectedPaymentMethod = '微信支付';
                selectedPaymentStatus = '立即支付';

                // 更新总计
                updateTotal();

                // 显示模态框
                document.getElementById('purchaseModal').style.display = 'block';
                document.body.style.overflow = 'hidden';
            }

            // 关闭购买模态框
            function closePurchaseModal() {
                document.getElementById('purchaseModal').style.display = 'none';
                document.body.style.overflow = 'auto';
            }

            // 增加数量
            function increaseQuantity() {
                const quantityInput = document.getElementById('quantity');
                const currentQuantity = parseInt(quantityInput.value);
                const maxQuantity = currentProduct.inventory;

                if (currentQuantity < maxQuantity) {
                    quantityInput.value = currentQuantity + 1;
                    updateTotal();
                    hideError('quantityError');
                } else {
                    showError('quantityError', '购买数量不能超过库存数量');
                }
            }

            // 减少数量
            function decreaseQuantity() {
                const quantityInput = document.getElementById('quantity');
                const currentQuantity = parseInt(quantityInput.value);

                if (currentQuantity > 1) {
                    quantityInput.value = currentQuantity - 1;
                    updateTotal();
                    hideError('quantityError');
                }
            }

            // 更新总计
            function updateTotal() {
                const quantity = parseInt(document.getElementById('quantity').value) || 1;
                const unitPrice = currentProduct.price;
                const totalAmount = quantity * unitPrice;

                document.getElementById('unitPrice').textContent = `¥${unitPrice.toFixed(2)}`;
                document.getElementById('totalQuantity').textContent = quantity;
                document.getElementById('totalAmount').textContent = `¥${totalAmount.toFixed(2)}`;

                // 验证数量
                if (quantity > currentProduct.inventory) {
                    showError('quantityError', '购买数量不能超过库存数量');
                    return false;
                } else {
                    hideError('quantityError');
                    return true;
                }
            }

            // 选择支付方式
            function selectPaymentMethod(element) {
                document.querySelectorAll('.payment-option').forEach(option => {
                    option.classList.remove('selected');
                });
                element.classList.add('selected');
                selectedPaymentMethod = element.getAttribute('data-method');
            }

            // 选择支付状态
            function selectPaymentStatus(element) {
                document.querySelectorAll('.status-option').forEach(option => {
                    option.classList.remove('selected');
                });
                element.classList.add('selected');
                selectedPaymentStatus = element.getAttribute('data-status');
            }

            // 显示错误信息
            function showError(elementId, message) {
                const errorElement = document.getElementById(elementId);
                errorElement.textContent = message;
                errorElement.style.display = 'block';
            }

            // 隐藏错误信息
            function hideError(elementId) {
                document.getElementById(elementId).style.display = 'none';
            }

            // 验证表单
            function validateForm() {
                let isValid = true;

                // 验证数量
                if (!updateTotal()) {
                    isValid = false;
                }

                // 验证地址
                const address = document.getElementById('deliveryAddress').value.trim();
                if (!address) {
                    showError('addressError', '请输入收货地址');
                    isValid = false;
                } else {
                    hideError('addressError');
                }

                // 验证电话
                const phone = document.getElementById('contactPhone').value.trim();
                const phoneRegex = /^1[3-9]\d{9}$/;
                if (!phone) {
                    showError('phoneError', '请输入联系电话');
                    isValid = false;
                } else if (!phoneRegex.test(phone)) {
                    showError('phoneError', '请输入正确的手机号码');
                    isValid = false;
                } else {
                    hideError('phoneError');
                }

                return isValid;
            }

            // 提交订单
            function submitOrder() {
                if (!validateForm()) {
                    return;
                }

                const quantity = parseInt(document.getElementById('quantity').value);
                const totalAmount = quantity * currentProduct.price;
                const deliveryAddress = document.getElementById('deliveryAddress').value.trim();
                const contactPhone = document.getElementById('contactPhone').value.trim();

                // 构建订单数据
                const orderData = {
                    ProductId: currentProduct.id,
                    ProductName: currentProduct.name,
                    Quantity: quantity,
                    UnitPrice: currentProduct.price,
                    TotalAmount: totalAmount,
                    DeliveryAddress: deliveryAddress,
                    ContactPhone: contactPhone,
                    PaymentMethod: selectedPaymentMethod,
                    PaymentStatus: selectedPaymentStatus
                };

                // 将数据传递给后端
                document.getElementById('<%= hdnOrderData.ClientID %>').value = JSON.stringify(orderData);

                // 触发后端提交
                document.getElementById('<%= btnSubmitOrder.ClientID %>').click();
            }

            // 页面加载完成后的动画效果
            $(document).ready(function () {
                // 为商品信息添加渐入动画
                $('.product-info-item').each(function (index) {
                    $(this).css('animation-delay', (index * 0.1) + 's');
                    $(this).addClass('fade-in');
                });

                // 鼠标悬停效果
                $('.btn-custom').hover(
                    function () {
                        $(this).css('transform', 'translateY(-3px) scale(1.05)');
                    },
                    function () {
                        $(this).css('transform', 'translateY(0) scale(1)');
                    }
                );

                // 商品图片点击放大效果
                $('.product-image').click(function () {
                    if ($(this).hasClass('enlarged')) {
                        $(this).removeClass('enlarged');
                        $(this).css({
                            'position': 'static',
                            'z-index': 'auto',
                            'transform': 'scale(1)',
                            'cursor': 'zoom-in'
                        });
                    } else {
                        $(this).addClass('enlarged');
                        $(this).css({
                            'position': 'fixed',
                            'top': '50%',
                            'left': '50%',
                            'transform': 'translate(-50%, -50%) scale(1.5)',
                            'z-index': '9999',
                            'cursor': 'zoom-out'
                        });
                    }
                });

                // 点击模态框外部关闭
                $('#purchaseModal').click(function (e) {
                    if (e.target === this) {
                        closePurchaseModal();
                    }
                });

                // ESC键关闭模态框
                $(document).keydown(function (e) {
                    if (e.keyCode === 27) {
                        closePurchaseModal();
                    }
                });
            });

            // 成功提示动画
            function showSuccessMessage(message) {
                var alertHtml = '<div class="alert alert-success alert-dismissible fade show" role="alert" style="position: fixed; top: 20px; right: 20px; z-index: 10000; min-width: 300px;">' +
                    '<strong>成功！</strong> ' + message +
                    '<button type="button" class="btn-close" data-bs-dismiss="alert"></button>' +
                    '</div>';
                $('body').append(alertHtml);

                // 3秒后自动消失
                setTimeout(function () {
                    $('.alert').fadeOut(500, function () {
                        $(this).remove();
                    });
                }, 3000);
            }

            // 从按钮数据属性显示购买模态框
            function showPurchaseModalFromData(button) {
                const productId = button.getAttribute('data-product-id');
                const productName = button.getAttribute('data-product-name');
                const price = button.getAttribute('data-product-price');
                const unit = button.getAttribute('data-product-unit');
                const inventory = button.getAttribute('data-product-inventory');

                showPurchaseModal(productId, productName, price, unit, inventory);
            }

            // 错误提示动画
            function showErrorMessage(message) {
                var alertHtml = '<div class="alert alert-danger alert-dismissible fade show" role="alert" style="position: fixed; top: 20px; right: 20px; z-index: 10000; min-width: 300px;">' +
                    '<strong>错误！</strong> ' + message +
                    '<button type="button" class="btn-close" data-bs-dismiss="alert"></button>' +
                    '</div>';
                $('body').append(alertHtml);

                // 5秒后自动消失
                setTimeout(function () {
                    $('.alert').fadeOut(500, function () {
                        $(this).remove();
                    });
                }, 5000);
            }
        </script>

</asp:Content>

